import { ScrollView, Text, View } from "react-native";
import NavBar from "@/components/NavBar";
import tw from "twrnc";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useState } from "react";
import { useDispatch } from 'react-redux';
import { selectGender } from '@/store/modules/InfoSlice';
import { router } from "expo-router";

export default function SelectGender() {
    const dispatch = useDispatch();
    const genderList = [
        {
            id: 1,
            name: '男生',
            icon: 'face-man',
        },
        {
            id: 2,
            name: '女生',
            icon: 'face-woman',
        }
    ]
    const [selectedGenders, setSelectedGenders] = useState<{ [key: number]: boolean }>({});
    return (
        <View>
            <NavBar title="选择性别" rightElement={true} />
            <Text style={tw`text-center text-2xl mt-10`}>性别选择机会只有一次，请慎重!</Text>
            <View style={tw`flex-row justify-around mt-10`}>
                {
                    genderList.map(item =>{
                        return <View style={tw`items-center`} key={item.id}>
                        <Icon 
                            name={item.icon} 
                            size={100}
                            color={selectedGenders[item.id] ? (item.id === 1 ? 'blue' : 'pink') : 'black'} 
                            onPress={() => {
                                setSelectedGenders({ ...selectedGenders, [item.id]: !selectedGenders[item.id] })
                                dispatch(selectGender(item.name));
                                router.push('/(auth)/perfect-info')
                            }
                            }
                        />
                        <Text>我是{item.name}</Text>
                    </View>
                    })
                }
            </View>
        </View>
    )
}